<template>
  <div
    :style='{ "minHeight": "calc(100vh - 200px)", "padding": "10px 0 30px", "margin": "0 auto", "color": "#333", "background": "none", "width": "calc(100% - 20px)", "fontSize": "14px", "height": "100%" }'>
    <el-form
      :style='{ "border": "1px solid #ddd", "padding": "30px 0", "boxShadow": "inset 0px 0px 0px 0px #E8EFF7,0 0px 0px 0px rgba(100,100,100,.1)", "borderColor": "#ccc", "alignItems": "flex-start", "borderRadius": "0px", "flexWrap": "wrap", "background": "#eee", "borderWidth": "1px", "display": "flex", "fontSize": "inherit", "borderStyle": "solid" }'
      class="add-update-preview" ref="ruleForm" :model="ruleForm" label-width="200px">
      <el-row>
        <el-form-item
          :style='{ "padding": "0px 0", "margin": "0 auto 20px", "color": "inherit", "borderRadius": "4px", "background": "none", "width": "100%", "fontSize": "inherit" }'
          v-if="flag == 'yisheng'" label="医生工号" prop="yishenggonghao">
          <el-input v-model="ruleForm.yishenggonghao" readonly placeholder="医生工号" clearable></el-input>
        </el-form-item>
        <el-form-item
          :style='{ "padding": "0px 0", "margin": "0 auto 20px", "color": "inherit", "borderRadius": "4px", "background": "none", "width": "100%", "fontSize": "inherit" }'
          v-if="flag == 'yisheng'" label="医生姓名" prop="yishengxingming">
          <el-input v-model="ruleForm.yishengxingming" placeholder="医生姓名" clearable></el-input>
        </el-form-item>
        <el-form-item
          :style='{ "padding": "0px 0", "margin": "0 auto 20px", "color": "inherit", "borderRadius": "4px", "background": "none", "width": "100%", "fontSize": "inherit" }'
          v-if="flag == 'yisheng'" label="性别" prop="xingbie">
          <el-select v-model="ruleForm.xingbie" placeholder="请选择性别">
            <el-option v-for="(item, index) in yishengxingbieOptions" v-bind:key="index" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :style='{ "padding": "0px 0", "margin": "0 auto 20px", "color": "inherit", "borderRadius": "4px", "background": "none", "width": "100%", "fontSize": "inherit" }'
          v-if="flag == 'yisheng'" label="年龄" prop="nianling">
          <el-input v-model="ruleForm.nianling" placeholder="年龄" clearable></el-input>
        </el-form-item>
        <el-form-item
          :style='{ "padding": "0px 0", "margin": "0 auto 20px", "color": "inherit", "borderRadius": "4px", "background": "none", "width": "100%", "fontSize": "inherit" }'
          v-if="flag == 'yisheng'" label="手机" prop="shouji">
          <el-input v-model="ruleForm.shouji" placeholder="手机" clearable></el-input>
        </el-form-item>
        <el-form-item
          :style='{ "padding": "0px 0", "margin": "0 auto 20px", "color": "inherit", "borderRadius": "4px", "background": "none", "width": "100%", "fontSize": "inherit" }'
          v-if="flag == 'yisheng'" label="职务" prop="zhiwu">
          <el-input v-model="ruleForm.zhiwu" placeholder="职务" clearable></el-input>
        </el-form-item>
        <el-form-item
          :style='{ "padding": "0px 0", "margin": "0 auto 20px", "color": "inherit", "borderRadius": "4px", "background": "none", "width": "100%", "fontSize": "inherit" }'
          v-if="flag == 'yisheng'" label="照片" prop="zhaopian">
          <file-upload tip="点击上传照片" action="file/upload" :limit="3" :multiple="true"
            :fileUrls="ruleForm.zhaopian ? ruleForm.zhaopian : ''" @change="yishengzhaopianUploadChange"></file-upload>
        </el-form-item>
        <el-form-item
          :style='{ "padding": "0px 0", "margin": "0 auto 20px", "color": "inherit", "borderRadius": "4px", "background": "none", "width": "100%", "fontSize": "inherit" }'
          v-if="flag == 'yisheng'" label="科室分类" prop="keshifenlei">
          <el-select v-model="ruleForm.keshifenlei" placeholder="请选择科室分类">
            <el-option v-for="(item, index) in yishengkeshifenleiOptions" v-bind:key="index" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :style='{ "padding": "0px 0", "margin": "0 auto 20px", "color": "inherit", "borderRadius": "4px", "background": "none", "width": "100%", "fontSize": "inherit" }'
          v-if="flag == 'yisheng'" label="挂号费" prop="guahaofei">
          <el-input v-model="ruleForm.guahaofei" placeholder="挂号费" clearable></el-input>
        </el-form-item>
        <el-form-item
          :style='{ "padding": "0px 0", "margin": "0 auto 20px", "color": "inherit", "borderRadius": "4px", "background": "none", "width": "100%", "fontSize": "inherit" }'
          v-if="flag == 'yonghu'" label="用户账号" prop="yonghuzhanghao">
          <el-input v-model="ruleForm.yonghuzhanghao" readonly placeholder="用户账号" clearable></el-input>
        </el-form-item>
        <el-form-item
          :style='{ "padding": "0px 0", "margin": "0 auto 20px", "color": "inherit", "borderRadius": "4px", "background": "none", "width": "100%", "fontSize": "inherit" }'
          v-if="flag == 'yonghu'" label="用户姓名" prop="yonghuxingming">
          <el-input v-model="ruleForm.yonghuxingming" placeholder="用户姓名" clearable></el-input>
        </el-form-item>
        <el-form-item
          :style='{ "padding": "0px 0", "margin": "0 auto 20px", "color": "inherit", "borderRadius": "4px", "background": "none", "width": "100%", "fontSize": "inherit" }'
          v-if="flag == 'yonghu'" label="头像" prop="touxiang">
          <file-upload tip="点击上传头像" action="file/upload" :limit="3" :multiple="true"
            :fileUrls="ruleForm.touxiang ? ruleForm.touxiang : ''" @change="yonghutouxiangUploadChange"></file-upload>
        </el-form-item>
        <el-form-item
          :style='{ "padding": "0px 0", "margin": "0 auto 20px", "color": "inherit", "borderRadius": "4px", "background": "none", "width": "100%", "fontSize": "inherit" }'
          v-if="flag == 'yonghu'" label="性别" prop="xingbie">
          <el-select v-model="ruleForm.xingbie" placeholder="请选择性别">
            <el-option v-for="(item, index) in yonghuxingbieOptions" v-bind:key="index" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :style='{ "padding": "0px 0", "margin": "0 auto 20px", "color": "inherit", "borderRadius": "4px", "background": "none", "width": "100%", "fontSize": "inherit" }'
          v-if="flag == 'yonghu'" label="年龄" prop="nianling">
          <el-input v-model="ruleForm.nianling" placeholder="年龄" clearable></el-input>
        </el-form-item>
        <el-form-item
          :style='{ "padding": "0px 0", "margin": "0 auto 20px", "color": "inherit", "borderRadius": "4px", "background": "none", "width": "100%", "fontSize": "inherit" }'
          v-if="flag == 'yonghu'" label="手机" prop="shouji">
          <el-input v-model="ruleForm.shouji" placeholder="手机" clearable></el-input>
        </el-form-item>
        <el-form-item
          :style='{ "padding": "0px 0", "margin": "0 auto 20px", "color": "inherit", "borderRadius": "4px", "background": "none", "width": "100%", "fontSize": "inherit" }'
          v-if="flag == 'yonghu'" label="密保问题" prop="pquestion">
          <el-input v-model="ruleForm.pquestion" placeholder="密保问题" clearable></el-input>
        </el-form-item>
        <el-form-item
          :style='{ "padding": "0px 0", "margin": "0 auto 20px", "color": "inherit", "borderRadius": "4px", "background": "none", "width": "100%", "fontSize": "inherit" }'
          v-if="flag == 'yonghu'" label="密保答案" prop="panswer">
          <el-input v-model="ruleForm.panswer" placeholder="密保答案" clearable></el-input>
        </el-form-item>
        <el-form-item
          :style='{ "padding": "0px 0", "margin": "0 auto 20px", "color": "inherit", "borderRadius": "4px", "background": "none", "width": "100%", "fontSize": "inherit" }'
          v-if="flag == 'users'" label="用户名" prop="username">
          <el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item
          :style='{ "padding": "0px 0", "margin": "0 auto 20px", "color": "inherit", "borderRadius": "4px", "background": "none", "width": "100%", "fontSize": "inherit" }'
          v-if="flag == 'users'" label="头像" prop="image">
          <file-upload tip="点击上传头像" action="file/upload" :limit="1" :multiple="false"
            :fileUrls="ruleForm.image ? ruleForm.image : ''" @change="usersimageUploadChange"></file-upload>
        </el-form-item>
        <el-form-item
          :style='{ "padding": "0", "margin": "30px auto", "alignItems": "center", "textAlign": "center", "background": "none", "display": "flex", "width": "100%", "fontSize": "18px" }'>
          <el-button class="btn3"
            :style='{ "border": "0px solid #3fcbca", "cursor": "pointer", "padding": "0 10px", "margin": "0px 4px", "outline": "none", "color": "#fff", "borderRadius": "4px", "background": "#64ac56", "width": "auto", "fontSize": "14px", "lineHeight": "24px", "height": "24px" }'
            type="primary" @click="onUpdateHandler">
            <span class="icon iconfont icon-tijiao10"
              :style='{ "color": "inherit", "margin": "0 2px", "fontSize": "inherit" }'></span>
            确定
          </el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>
<script>
// 数字，邮件，手机，url，身份证校验
import { isNumber, isIntNumer, isEmail, isMobile, isPhone, isURL, checkIdCard } from "@/utils/validate";

export default {
  data() {
    return {
      ruleForm: {},
      flag: '',
      usersFlag: false,
      yishengxingbieOptions: [],
      yishengkeshifenleiOptions: [],
      yonghuxingbieOptions: [],
    };
  },
  mounted() {
    var table = this.$storage.get("sessionTable");
    this.flag = table;
    this.$http({
      url: `${this.$storage.get("sessionTable")}/session`,
      method: "get"
    }).then(({ data }) => {
      if (data && data.code === 0) {
        this.ruleForm = data.data;
      } else {
        this.$message.error(data.msg);
      }
    });
    this.yishengxingbieOptions = "男,女".split(',')
    this.$http({
      url: `option/keshifenlei/keshifenlei`,
      method: "get"
    }).then(({ data }) => {
      if (data && data.code === 0) {
        this.yishengkeshifenleiOptions = data.data;
      } else {
        this.$message.error(data.msg);
      }
    });
    this.yonghuxingbieOptions = "男,女".split(',')
  },
  methods: {
    yishengzhaopianUploadChange(fileUrls) {
      this.ruleForm.zhaopian = fileUrls;
    },
    yonghutouxiangUploadChange(fileUrls) {
      this.ruleForm.touxiang = fileUrls;
    },
    usersimageUploadChange(fileUrls) {
      this.ruleForm.image = fileUrls;
    },
    onUpdateHandler() {
















      if (this.ruleForm.zhaopian != null) {
        this.ruleForm.zhaopian = this.ruleForm.zhaopian.replace(new RegExp(this.$base.url, "g"), "");
      }




      if ('yisheng' == this.flag && this.ruleForm.guahaofei && (!isIntNumer(this.ruleForm.guahaofei))) {
        this.$message.error(`挂号费应输入整数`);
        return
      }


      if ('yisheng' == this.flag && this.ruleForm.thumbsupnum && (!isIntNumer(this.ruleForm.thumbsupnum))) {
        this.$message.error(`赞应输入整数`);
        return
      }


      if ('yisheng' == this.flag && this.ruleForm.crazilynum && (!isIntNumer(this.ruleForm.crazilynum))) {
        this.$message.error(`踩应输入整数`);
        return
      }




      if ('yisheng' == this.flag && this.ruleForm.clicknum && (!isIntNumer(this.ruleForm.clicknum))) {
        this.$message.error(`点击次数应输入整数`);
        return
      }


      if ('yisheng' == this.flag && this.ruleForm.discussnum && (!isIntNumer(this.ruleForm.discussnum))) {
        this.$message.error(`评论数应输入整数`);
        return
      }


      if ('yisheng' == this.flag && this.ruleForm.storeupnum && (!isIntNumer(this.ruleForm.storeupnum))) {
        this.$message.error(`收藏数应输入整数`);
        return
      }
      if ((!this.ruleForm.yonghuzhanghao) && 'yonghu' == this.flag) {
        this.$message.error('用户账号不能为空');
        return
      }


      if ((!this.ruleForm.mima) && 'yonghu' == this.flag) {
        this.$message.error('密码不能为空');
        return
      }


      if ((!this.ruleForm.yonghuxingming) && 'yonghu' == this.flag) {
        this.$message.error('用户姓名不能为空');
        return
      }




      if (this.ruleForm.touxiang != null) {
        this.ruleForm.touxiang = this.ruleForm.touxiang.replace(new RegExp(this.$base.url, "g"), "");
      }




      if ('yonghu' == this.flag && this.ruleForm.nianling && (!isIntNumer(this.ruleForm.nianling))) {
        this.$message.error(`年龄应输入整数`);
        return
      }


      if ('yonghu' == this.flag && this.ruleForm.shouji && (!isMobile(this.ruleForm.shouji))) {
        this.$message.error(`手机应输入手机格式`);
        return
      }




      if ('users' == this.flag && this.ruleForm.username.trim().length < 1) {
        this.$message.error(`用户名不能为空`);
        return
      }
      if (this.flag == 'users') {
        this.ruleForm.image = this.ruleForm.image.replace(new RegExp(this.$base.url, "g"), "")
      }
      this.$http({
        url: `${this.$storage.get("sessionTable")}/update`,
        method: "post",
        data: this.ruleForm
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "修改信息成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              if (this.flag == 'users') {
                this.$storage.set('headportrait', this.ruleForm.image)
              }
            }
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.el-date-editor.el-input {
  width: auto;
}

.add-update-preview .el-form-item ::v-deep .el-form-item__label {
  padding: 0 10px 0 0;
  color: inherit;
  background: none;
  font-weight: 600;
  display: inline-block;
  width: 200px;
  font-size: inherit;
  line-height: 40px;
  text-align: right;
}

.add-update-preview .el-form-item ::v-deep .el-form-item__content {
  margin-left: 200px;
}

.add-update-preview .el-input ::v-deep .el-input__inner {
  border-radius: 4px;
  padding: 0 10px;
  color: inherit;
  background: #f6f6f6;
  width: auto;
  font-size: 12px;
  border-color: #ccc;
  border-width: 1px;
  border-style: solid;
  min-width: 200px;
  height: 30px;
}

.add-update-preview .el-select ::v-deep .el-input__inner {
  border-radius: 4px;
  padding: 0 10px;
  color: inherit;
  background: #f6f6f6;
  width: auto;
  font-size: 12px;
  border-color: #ccc;
  border-width: 1px;
  border-style: solid;
  min-width: 200px;
  height: 30px;
}

.add-update-preview .el-date-editor ::v-deep .el-input__inner {
  border-radius: 4px;
  padding: 0 10px 0 30px;
  color: inherit;
  background: #f6f6f6;
  width: auto;
  font-size: 12px;
  border-color: #ccc;
  border-width: 1px;
  border-style: solid;
  min-width: 200px;
  height: 30px;
}

.add-update-preview ::v-deep .el-upload--picture-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  width: auto;
  height: auto;
  line-height: initial;
  vertical-align: middle;
}

.add-update-preview ::v-deep .el-upload-list .el-upload-list__item {
  border: 1px solid #ccc;
  cursor: pointer;
  border-radius: 4px;
  margin: 0 0 10px;
  color: #aaa;
  background: #f6f6f6;
  object-fit: cover;
  width: 150px;
  font-size: 24px;
  line-height: 60px;
  text-align: center;
  height: 60px;
}

.add-update-preview ::v-deep .el-upload .el-icon-plus {
  border: 1px solid #ccc;
  cursor: pointer;
  border-radius: 4px;
  margin: 0 0 10px;
  color: #aaa;
  background: #f6f6f6;
  object-fit: cover;
  width: 150px;
  font-size: 24px;
  line-height: 60px;
  text-align: center;
  height: 60px;
}

.add-update-preview .el-textarea ::v-deep .el-textarea__inner {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px 10px;
  color: inherit;
  background: #f6f6f6;
  width: auto;
  font-size: 12px;
  min-height: 80px;
  min-width: 300px;
  height: auto;
}

.add-update-preview .btn3 {
  border: 0px solid #3fcbca;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 10px;
  margin: 0px 4px;
  outline: none;
  color: #fff;
  background: #64ac56;
  width: auto;
  font-size: 14px;
  line-height: 24px;
  height: 24px;
}

.add-update-preview .btn3:hover {
  opacity: 0.8;
}

.editor>.avatar-uploader {
  line-height: 0;
  height: 0;
}
</style>
